<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>上传文件</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.head-btn {
				text-align: center;
				margin-top: 100px;
			}

			.token-list {
				padding: 10px;
			}

			.token-list h5 {
				font-size: 16px;
			}

			.token-enable {
				height: 300px;
				/* line-height: 30px; */
				text-align: center;
				/* background: #D0EEFF; */
				border: 1px solid #99D3F5;
				border-radius: 10px;
				padding: 10px 20px;

				overflow: scroll;
				white-space: nowrap;
			}

			.token-unable {
				height: 300px;
				/* text-align: center; */
				/* background: #D0EEFF; */
				border: 1px solid #99D3F5;
				border-radius: 10px;
				padding: 10px 20px;
				margin-bottom: 20px;
			}

			.token-enable>p {

				font-size: 20upx;
				margin-bottom: 10upx;
				border-bottom: 1px solid #99D3F5;
				color: cornflowerblue;
				padding: 10upx;
			}

			.file {
				position: relative;
				display: inline-block;
				background: #D0EEFF;
				border: 1px solid #99D3F5;
				border-radius: 10px;
				padding: 10px 20px;
				overflow: hidden;
				color: #1E88C7;
				text-decoration: none;
				text-indent: 0;
				line-height: 20px;
				font-size: 16px;
			}

			.file input {
				position: absolute;
				font-size: 32px;
				right: 0;
				top: 0;
				opacity: 0;
			}

			.file:hover {
				background: #AADFFD;
				border-color: #78C3F3;
				color: #004974;
				text-decoration: none;
			}

			.determine {
				color: #FFFFFF;
				background-color: #007AFF;
				display: inline-block;
				font-size: 20px;
				border-radius: 5px;
				padding: 8px 24px;
			}

			.showFileName {
				display: inline-block;
				height: 30px;
				min-width: 300px;
			}

			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
				border-radius: 5px;
				cursor: pointer;
			}

			.btn1 {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
				border-radius: 5px;
				cursor: pointer;
			}

			.btn-red {
				background-color: #dd524d;
			}

			.btn-yellow {
				background-color: #f0ad4e;
			}

			.desc {
				padding: 10px;
				color: #999999;
			}
		</style>
	</head>
	<body>
		<div class="token-list">
			<h5>导入token</h5>
			<div class="token-unable">
				<p>以下token无法下单，有问题请联系管理员</p>
				<p class="u-item"></p>
			</div>
			<div class="token-enable">
				<h5>可导入</h5>
			</div>
		</div>
		<div class="head-btn">
			<form action="" method="post">
				<a href="javascript:;" class="file">选择文件
					<input type="file" name="uploadFile" id="uploadFile">
				</a>
			</form>
		</div>
		<div>
			<button class="btn" type="button" data-action="redirectTo">确定</button>
		</div>

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>

		<script>
			var data = []

			function getQuery(name) { // 获取uni传值
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					// 对参数值进行解码
					return unescape(r[2]);
				}
				return null;
			}

			// console.log(getQuery('token')); // 调用获取参数
			$(".file").on("change", "input[type='file']", function() {
				let filePath = $(this).val();
				localStorage.setItem("fileAddress", filePath);
				let lastname = localStorage.getItem("fileAddress");
				if (lastname != "") {
					$(".showFileName").html(lastname);
				} else {
					$(".showFileName").html("");
				}
			});

			$('#uploadFile').change(function(evt) {
				var ipt = document.getElementById('uploadFile');
				// console.log(ipt.files[0]);
				var formdata = new FormData(); // 创建一个form类型的数据
				formdata.append("daoru", ipt.files[0]); // 获取上传文件的数据

				$.ajax({
					url: 'http://jctt.net/yonghu/index/daorutoken',
					type: "POST",
					processData: false,
					contentType: false,
					data: formdata,
					headers: {
						'token': getQuery('token')
					},
					success: function(data) {
						const resObj = JSON.parse(data)
						// data = resObj.data.drchenggong
						uni.postMessage({
							data: data
						});

						$.each(resObj.data.drchenggong, function() {
							$('.token-enable').append('<p>' + this.tkno + '</p>')
						});

					},
					error: function(err) {
						alert('上传失败')
					}
				});
			});
			$('.btn').click(function() {
				uni.reLaunch({
					url: '/pages/create_order/create_order'
				})
			})
		</script>
	</body>